<template>
  <div class="app-container">
    <div class="product-list">
      <div v-for="item in historyList" :key="item.id">
        <productItem :product="item" @listRefresh = "getHistory" />
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination :current-page="historyPage.hpage" :page-size="historyPage.hlimit" :total="historyPage.htotal"
      :page-sizes="[8, 16, 32, 128]" style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" />
  </div>
</template>
<script>
import invitationApi from '@/api/lendingProduct'
import productItem from '@/components/productItem/info';
export default {
  components: {
    productItem
  },
  data() {
    return {
      historyList: null,
      historyPage: {
        page: 1,
        limit: 8,
        total: 0,
      },

    }
  },

  created() {
    this.historyPage = {
      hpage: 1,
      hlimit: 8,
      htotal: 0
    }
  },
  mounted() {
    this.getHistory();
  },
  methods: {
    getHistory() {
      const page = this.historyPage.hpage
      const limit = this.historyPage.hlimit
      invitationApi.getList(page, limit)
        .then(response => {
          response.data.item.map(item => {
            item.query = JSON.parse(item.extra);
          });
          this.historyList = response.data.item
          this.historyPage.atotal = response.data.total
        })
        .catch(() => {
        })
    },
    // 分页
    handleCurrentChange(val) {
      this.historyPage.hpage = val
      this.getHistory()
    },
    handleSizeChange(val) {
      this.historyPage.hlimit = val
      this.historyPage.hpage = 1
      this.getHistory()
    },
    filtersText(val) { // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != '') {
        var reg = /[\u4e00-\u9fa5]/g
        var names = val.match(reg)
        val = names.join('')
        return val.substr(0, 50);//获取富文本文字内容的前50个字符
      } else return ''
    
  }
  }
}
</script>
<style lang="scss">
.product-list {
  display: flex;
  width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
  .post-del-expand {
    padding-left: 10%;
    padding-right: 10%;

  }
}
</style>


